<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon" href="/favicon.ico" />
    <link href="./static/ai/css/bootstrap.min.css" rel="stylesheet">
    <link href="./static/ai/css/app.css" rel="stylesheet">
    <link href="./static/ai/css/iconfont/iconfont.css?v=1" rel="stylesheet">
     
    <title>AI应用市场</title>
</head>

<body class="bg-light ready">

    <div class="container-fluid p-4">

        <div class="row">

            <div class="col-12 pt-2" id="app">
                <div v-cloak>
                    <div class="d-inline-block mr-3">
                        <div class="d-flex align-items-center flex-wrap">
                            <button class="btn btn-sm btn-outline-success mr-3 mb-3" @click="category=''" :class="{selected:category===''}">全部</button>
                            <button v-for="item in categories" @click="category=item" class="btn btn-sm btn-outline-success mr-3 mb-3" :class="{selected:category===item}">{{item}}</button>
                        </div>
                    </div>

                    <div class="d-inline-block mb-3">
                        <div class="d-flex align-items-center">
                            <input class="form-control mr-3 d-inline-block" v-model="keyword" type="text" placeholder="搜索" style="width:12em">
                            <div class="dropdown d-inline-block">
                                <button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
                                {{sort==="hot"?"热门":"最新"}}
                            </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" @click="sort='hot'">热门</a>
                                    <a class="dropdown-item" @click="sort='new'">最新</a>
                                </div>
                            </div>
                            <div class="dropdown d-inline-block">
                                <button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
                                {{{all:"全部",installed:"已添加",notInstalled:"未添加"}[display]}}
                            </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" @click="display='all'">全部</a>
                                    <a class="dropdown-item" @click="display='installed'">已添加</a>
                                    <a class="dropdown-item" @click="display='notInstalled'">未添加</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row" v-cloak>
                    <div v-for="role in filteredRoles" class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3">
                        <div class="bg-white shadow-sm mt-3 rounded p-3" @mouseover="hover=role.roleId" @mouseout="hover=0">
                            <div class="d-flex align-items-center justify-content-between role position-relative">
                                <div class="d-flex align-items-center">
                                    <img :src="role.avatar" class="avatar mr-2" @dblclick="installAndSwitch(role.roleId)" />
                                    <div>
                                        <div>{{role.name}}</div>
                                        <div class="text-secondary desc">{{role.desc}}</div>
                                    </div>
                                </div>
                                <div v-if="installed(role.roleId)" class="installed" @click="uninstall(role.roleId)">
                                    &#xe612;
                                </div>
                                <div v-else class="install" v-show="hover==role.roleId" @click="install(role.roleId)">
                                    &#xec1d;
                                </div>
                            </div>
                            <div class="mt-3 d-flex justify-content-between align-items-center">
                                <span class="desc"># {{role.category}}</span> <span class="desc">&#xe623; {{role.installed}}</span>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>


    <script src="./static/ai/js/jquery.min.js"></script>

    <script src="./static/ai/js/bootstrap.bundle.min.js"></script>
    <!-- vue -->
    <script type="text/javascript" src="./static/ai/js/vue.global.js"></script>

    <script>
        const App = {
            data() {
                return {
                    roles: [],
                    installedRoles: [],
                    categories: [],
                    hover: 0,
                    category: '',
                    keyword: '',
                    display: 'all', // all installed notInstalled
                    sort: 'hot' // hot new
                }
            },
            computed: {
                filteredRoles() {
                    return this.roles.filter((item) => {
                        return (this.display === 'all' || (this.display === 'installed' && this.installed(item.roleId)) || (this.display === 'notInstalled' && !this.installed(item.roleId))) &&
                            (!this.category || (item.category && item.category.includes(this.category))) &&
                            (!this.keyword || (item.name.includes(this.keyword) || (item.desc && item.desc.includes(this.keyword))));
                    }).sort((a, b) => {
                        return this.sort === "hot" ? (b.installed || 0) - (a.installed || 0) : b.roleId - a.roleId;
                    });
                }
            },
            mounted() {
                this.loadRoles();
                this.loadInstalledRoles();
                this.loadCategories();
            },
            methods: {
                loadRoles() {
                    $.ajax({
                        url: "./static/ai/roles?type=all",
                        success: (res) => {
                            if (res.code) {
                                return alert(res.msg);
                            }
                            this.roles = res.data;
                        }
                    });
                },
                loadCategories() {
                    $.ajax({
                        url: "./static/ai/setting/categories",
                        success: (res) => {
                            if (res.code) {
                                return alert(res.msg);
                            }
                            for (let category of res.data) {
                                this.categories.push(category.value);
                            }
                        }
                    });
                },
                loadInstalledRoles() {
                    const data = JSON.parse(localStorage.getItem("ai.data") || "{}");
                    this.installedRoles = data.roleList || [];
                },
                install(roleId) {
                    const role = this.roles.find((role) => role.roleId === roleId);
                    if (role) {
                        window.parent.ai.saveRole(role);
                        this.loadInstalledRoles();
                        $.ajax({
                            url: "./static/ai/roles/installed",
                            data: {
                                roleId
                            },
                            type: "post"
                        });
                    }
                },
                installAndSwitch(roleId) {
                    this.install(roleId);
                    window.parent.ai.switchRoleId(roleId);
                    window.parent.ai.switchModule('chat');
                },
                uninstall(roleId) {
                    window.parent.ai.deleteRole(roleId);
                    this.loadInstalledRoles();
                },
                installed(roleId) {
                    return this.installedRoles.find((role) => !role.deleted && role.roleId === roleId);
                }
            }
        }
        Vue.createApp(App).mount('#app');

        $(document).click(function() {
            try {
                window.parent.ai.hideAll();
            } catch (e) {}
        });
    </script>

    <style>
        .container-fluid {
            max-width: 1660px;
        }
        
        .desc {
            font-size: 0.86rem;
            color: #6c757d!important;
            font-family: iconfont;
        }
        
        .install,
        .installed {
            color: #666;
            font-size: 1.6rem;
            border-radius: .5rem;
            width: 2rem;
            height: 2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: iconfont;
        }
        
        .install:hover {
            color: #209d44;
            background-color: #eee;
        }
        
        .installed {
            color: #209d44 !important;
            background-color: initial !important;
        }
        
        .btn-sm {
            font-size: 1rem !important;
        }
        
        .btn-outline-success {
            color: #666;
            border-color: #666;
        }
        
        .selected,
        .btn-outline-success:hover {
            color: #28a745 !important;
            background-color: #f4fcf6 !important;
            border-color: #28a745 !important;
        }
        
        .btn-outline-success:active {
            color: #28a745 !important;
            background-color: #f4fcf6 !important;
        }
        
        a {
            cursor: pointer;
        }
    </style>

</body>

</html>